<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      *{
        font-size: 18px;
        margin-top: 5px;
      }
    </style>
    <title></title>
  </head>
  <body>
    <div id="app">
     <table cellspacing="0" border="1" >
       <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
       </tr>
       <tr v-for="item in arr" :key="item.id">
         <td>{{item.id}}</td>
         <td>{{item.name}}</td>
         <td>{{item.age}}</td>
       </tr>
     </table>
      姓名：<input type="text" name="" id="" v-model="name">
      <br>
      年龄：<input type="text" name="" id="" v-model="age">
      <br>
      <button @click=add>添加学员</button>
       <br>
      班级平均年龄为：<span>{{avg}}</span>
    </div>
    <script src="./vue.js"></script>
    <script>
      const vm=new Vue({
        el:'#app',
        data:{name:"",age:"",
          arr:[{id:"1",name:"little1",age:"18"},{id:"2",name:"little2",age:"17"},{id:"3",name:"little3",age:"21"}]
        },
        methods:{
          add(){
            this.arr.push({
              id:this.arr.length+1,
              name:this.name,
              age:this.age
            })
          }
        },
        computed:{
          avg(){
            let sum=0
            this.arr.forEach(item => {
              sum+=+item.age
            });
            
            return sum/this.arr.length
          }
        }
       })
    </script>
  </body>
</html>